<template>
  <div class="buy-details-box">
    <div class="container-buy box-border">
      <div class="img-wrap">
        <div class="block wrap-left">
          <el-carousel :autoplay="false" @change="PictureClick" class="img-box big-box" trigger="click" height="350px"
          ref="carousel">
          <el-carousel-item v-for="(item,index) in banners" :key="index" name="index">
          <img :src="item.photoUrl" :onerror="defaultImg">
          </el-carousel-item>
          </el-carousel>
          <el-carousel :autoplay="false" @change="PictureClick_new" class="img-box bottom-box" type="card"
          height="100px"
          ref="carousel_new">
          <el-carousel-item v-for="(item,index) in banners" :key="index" name="index">
          <img :src="item.photoUrl" :onerror="defaultImg">
          </el-carousel-item>
          </el-carousel>
        </div>
        <div class="wrap-right">
          <div class="wrap-right-bottom">
            <div class="message">
              <div class="mes-head" style="text-align: center">
                <img class="mes-logo company-logo"
                     :src="headInfo.photo"
                     alt=""
                     :onerror="defaultHeadImg">
                <p  v-if="headInfo.name">{{headInfo.name ? translateUTZaw(headInfo.name) : ''}}</p>
              </div>
              <p class="mes" v-if="this.uesrPhone">
                <img class="mes-logo phone-logo" src="../../../static/phone.png" alt="">
                <span class="mes-value phone-value">{{this.uesrPhone ? this.uesrPhone : ''}}</span>
                <el-button type="warning" @click="showPhone" size="mini" style="" v-if="phoneIsHide">Show</el-button>
              </p>
              <p class="mes" v-if="headInfo.email">
                <img class="mes-logo" src="../../../static/email.png" alt="">
                <span class="mes-value">{{headInfo.email ? headInfo.email : ''}}</span>
              </p>
            </div>
            <!--<div class="others-btn">-->
              <!--<p class="mes">-->
                <!--<img class="mes-logo" src="../../../static/save.png" alt="">-->
                <!--<span class="mes-value">Save</span>-->
              <!--</p>-->
              <!--<p class="mes">-->
                <!--<img class="mes-logo" src="../../../static/share.png" alt="">-->
                <!--<span class="mes-value">Share</span>-->
              <!--</p>-->
              <!--<p class="mes">-->
                <!--<img class="mes-logo" src="../../../static/report.png" alt="">-->
                <!--<span class="mes-value">Report propblems</span>-->
              <!--</p>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>
    <!--Title-->
    <div class="container-buy developer-info">
      <div class="item" v-if="this.burmeseTitle || this.englishTitle">
        <span class="item-right">{{ this.$i18n.locale == 'MM' ? translateUTZaw(burmeseTitle) : translateUTZaw(englishTitle)}}</span>
      </div>
      <div class="item" v-if="this.propertyName || this.street">
        <span class="item-right" v-if="this.propertyName">{{translateUTZaw(propertyName)}},</span>
        <span class="item-right" v-if="this.street">{{translateUTZaw(street)}}</span>
      </div>
      <div class="item" v-if="this.townshipId || this.regionId">
        <span class="item-right" v-if="this.townshipId">{{getTownshipItem(townshipId)}},</span><span
              class="item-right" v-if="this.regionId">{{getRegionItem(regionId)}}</span>
      </div>
      <div class="item" v-if="this.usdPrice">
        <span class="item-right price-currency">{{regexNum(this.usdPrice)}}&nbsp;USD</span>
        <span class="item-right price-currency" v-if="this.mmkPrice">({{regexNum(this.mmkPrice)}}&nbsp;Lks)</span>
      </div>
      <div class="item" v-else-if="this.mmkPrice">
        <span class="item-right price-currency">{{regexNum(this.mmkPrice)}}&nbsp;Lks</span>
      </div>
      <div class="item" v-if="propertyTypeId != 4">
          <span class="item-right price-currency">{{this.masterBedrooms}}</span><span class="room-txt">{{$t('m.Master')}} {{$t('m.Bedroom')}}</span>
          <span class="item-right price-currency">{{this.bedrooms}}</span><span class="room-txt">{{$t('m.Bedroom')}}</span>
          <span class="item-right price-currency">{{this.bathrooms}}</span><span class="room-txt">{{$t('m.Bathroom')}}</span>
      </div>
      <div class="item" v-if="propertyTypeId != 4 && this.floorSize">
        <span class="item-left">{{$t('m.Floorsize')}}</span><span
        class="item-right">{{this.floorSize ? regexNum(this.floorSize) + ' Sqft ':''}} {{this.floorLength &&  this.floorWidth ? '('+regexNum(this.floorLength)+ ' x ' +regexNum(this.floorWidth) +')' : ''}}</span>
      </div>
      <div class="item" v-if="propertyTypeId != 1 && propertyTypeId != 2 && this.landSize">
        <span class="item-left">{{$t('m.landsize')}}</span><span
        class="item-right">{{this.landSize? regexNum(this.landSize) + ' Sqft ':''}}{{this.landLength && this.landWidth ? '('+regexNum(this.landLength)+ ' x ' +regexNum(this.landWidth) +')' : ''}}</span>
      </div>
      <div class="item" v-if="this.transactionType == 1">
        <span class="item-left">{{$t('m.Pricesqft')}}</span><span
        class="item-right">{{regexNum(this.priceSqft) + '  Lks/sqft'}}</span>
      </div>
      <div class="item" v-if="this.propertyTypeId!=null || this.propertySubTypeId!=null">
        <span class="item-left">{{$t('m.Type')}}</span><span
        class="item-right">{{getPropertyTypeItem(this.propertyTypeId)}}/{{getPropertySubTypeItem(this.propertySubTypeId)}}</span>
      </div>
      <div class="item" v-if="this.transactionType">
        <span class="item-left">{{$t('m.ListingType')}}</span><span
        class="item-right">{{this.transactionType == 2 ? $t('m.rent') : $t('m.sale')}}</span>
      </div>
      <div class="item" v-if="propertyTypeId != 4 && this.furnishingId != null">
        <span class="item-left">{{$t('m.Furnishing')}}</span><span
        class="item-right">{{getFurnishingItem(this.furnishingId)}}</span>
      </div>
      <div class="item" v-if="propertyTypeId != 4 && this.buildYear">
        <span class="item-left">{{$t('m.Built')}}</span><span
        class="item-right">{{this.buildYear}}</span>
      </div>
      <div class="item" v-if="this.floorNo">
        <span class="item-left">{{$t('m.FloorNumber')}}</span><span
        class="item-right">{{floorTranslate(this.floorNo)}}</span>
      </div>
      <div class="item" v-if="this.totalFloor">
        <span class="item-left">{{$t('m.TotalFloor')}}</span><span
        class="item-right">{{this.totalFloor}}</span>
      </div>
      <div class="item" v-if="propertyTypeId != 4 && this.facingId != null">
        <span class="item-left">{{$t('m.Facing')}}</span><span
        class="item-right">{{getFacingIdItem(this.facingId)}}</span>
      </div>
      <div class="item" v-if="this.Listed">
        <span class="item-left">{{$t('m.Listed')}}</span><span
        class="item-right">{{this.dateFormat(this.Listed)}}</span>
      </div>
      <div class="item" v-if="this.listingId">
        <span class="item-left">{{$t('m.ListingID')}}</span><span
        class="item-right">{{this.listingId}}</span>
      </div>
    </div>
    <!--Indoor Features-->
    <div class="container-buy no-padding">
      <div class="price-box" v-if="indoorArr.length>0">
        <div class="title">{{$t('m.IndoorFeatures')}}</div>
        <div class="box-border"></div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item" v-for="item in indoorArr"><i class="el-icon-check green-icon"></i>{{getIndoorArrItem(item)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--Outdoor Features-->
    <div class="container-buy no-padding">
      <div class="price-box" v-if="outdoorArr.length>0">
        <div class="title">{{$t('m.OutdoorFeatures')}}</div>
        <div class="box-border"></div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item" v-for="item in outdoorArr"><i class="el-icon-check green-icon"></i>{{getOutdoorArrItem(item)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--Special Features-->
    <div class="container-buy no-padding">
      <div class="price-box" v-if="specialFeaturesTypeArr.length>0">
        <div class="title">{{$t('m.SpecialFeatures')}}</div>
        <div class="box-border"></div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item" v-for="item in specialFeaturesTypeArr"><i class="el-icon-check green-icon"></i>{{getSpecialFeaturesArrItem(item)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--Description-->
    <div class="container-buy no-padding">
    <div class="price-box" v-if="description">
      <div class="title">{{$t('m.Description')}}</div>
      <div class="box-border"></div>
      <div class="content">
        <div class="icon-box">
          <p v-html='translateUTZaw(description)' class="icon-item"></p>
        </div>
      </div>
    </div>
    </div>

    <div class="container-buy no-padding">
    <div class="price-box" v-if="showMap">
      <div class="title">{{$t('m.Location')}}</div>
      <div class="box-border"></div>
      <div class="content content-bottom">
      <div class="map-box">
        <div id='Map'></div>
      </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import GoogleMapsLoader from 'google-maps'
  import { visitorInformation, contactCount} from '@/api/mgc_api'
  import Qs from 'qs'

  // 英文翻译
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import township from '@/json/township'
  import region from '@/json/region'
  import floorJson from '@/json/floor'
  import outdoorFeaturesTypeJson from '@/json/outdoorFeaturesType'
  import indoorFeaturesTypeJson from '@/json/indoorFeaturesType'
  import specialFeaturesTypeJson from '@/json/specialFeaturesType'
  import furnishingTypeJson from '@/json/furnishingType'
  import facingTypeJson from '@/json/facingType'
  // 缅甸文翻译
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_township from '@/mmJson/township'
  import mm_region from '@/mmJson/region'
  import mm_floorJson from '@/mmJson/floor'
  import mm_outdoorFeaturesTypeJson from '@/mmJson/outdoorFeaturesType'
  import mm_indoorFeaturesTypeJson from '@/mmJson/indoorFeaturesType'
  import mm_specialFeaturesTypeJson from '@/mmJson/specialFeaturesType'
  import mm_furnishingTypeJson from '@/mmJson/furnishingType'
  import mm_facingTypeJson from '@/mmJson/facingType'
  export default {
    name: 'buyDetails',
    data () {
      return {
        defaultHeadImg: 'this.src="' + require('../../../static/company.png') + '"',
        defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        uesrPhone: null,
        phoneIsHide: true,
        id:'',
        headInfo:{
          name: '',
          photo: '',
          phone: '',
          email: '',
        },
        banners: [],
        burmeseTitle: '',
        englishTitle: '',
        propertyName: '',
        street: '',
        townshipId: null,
        regionId: null,
        mmkPrice: '',
        usdPrice: '',
        masterBedrooms: null,
        bedrooms: null,
        bathrooms: null,
        floorSize: null,
        floorLength: null,
        floorWidth: null,
        landSize: null,
        landWidth: null,
        landLength: null,
        priceSqft: null,
        transactionType: null,
        furnishingId: null,
        propertyType: '',
        propertySubType: '',
        propertyTypeId: null,
        propertySubTypeId: null,
        buildYear: null,
        floorNo: null,
        totalFloor: null,
        facingId: null,
        Listed: null,// 上市日期 对应后台返回字段 updateDatetime
        listingId: null,
        indoorArr: [],
        outdoorArr: [],
        description: '',
        specialFeaturesTypeArr: [],
        //
        // banners: [
        //   {'photoId': 760, 'photoUrl': 'http://ads.bestproperty.com.mm/images/10/843ec535644af3b1e3958dee0bef26.jpg','orderNumber':1},
        //   {'photoId': 764, 'photoUrl': 'http://ads.bestproperty.com.mm/images/1b/4c47e9a1472507437bd3c3edd1b5eb.jpg','orderNumber':5}
        // ],

         // 房产类型 id匹配
        completionDate: '', // 完成时间
        construction: '', // 建筑完成情况

         // 上市id
        showMap: true,
        latlng: {lat: 202, lng: 100},
      //

      }
    },
    computed: {
      townshipJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_township
        }else {
          return township
        }
      },
      regionJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_region
        }else {
          return region
        }
      },
      floorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_floorJson
        }else {
          return floorJson
        }
      },
      indoorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_indoorFeaturesTypeJson
        }else {
          return indoorFeaturesTypeJson
        }
      },
      outdoorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_outdoorFeaturesTypeJson
        }else {
          return outdoorFeaturesTypeJson
        }
      },
      specialFeaturesTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_specialFeaturesTypeJson
        }else {
          return specialFeaturesTypeJson
        }
      },
      facingTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_facingTypeJson
        }else {
          return facingTypeJson
        }
      },
      furnishingTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_furnishingTypeJson
        }else {
          return furnishingTypeJson
        }
      },
      propertyTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertyType
        }else {
          return propertyType
        }
      },
      propertySubTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertySubType
        }else {
          return propertySubType
        }
      },
    },
    methods: {
      // 上下两个组件同步索引
      PictureClick (index) {
        this.$refs.carousel_new.setActiveItem(index)
      },
      PictureClick_new (index) {
        this.$refs.carousel.setActiveItem(index)
      },
      geolocate () {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            }
            var circle = new window.mapsObj.googleObj.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            })
            window.mapsObj.autocomplete.setBounds(circle.getBounds())
          })
        }
      },
      initMap (latlng) {
        this.isInitMap = true
        /* 初始化地图 */
        let map = new window.mapsObj.googleObj.maps.Map(document.getElementById('Map'), {
          center: latlng,
          scrollwheel: true,
          zoom: 11
        })
        this.latlng.lat = latlng.lat
        this.latlng.lng = latlng.lng
        /* 设置标记 */
        let marker = new window.mapsObj.googleObj.maps.Marker({
          map: map,
          draggable: true,
          animation: window.mapsObj.googleObj.maps.Animation.DROP,
          position: latlng
        })
        /* 拖动marker设置经纬度坐标 */
        window.mapsObj.googleObj.maps.event.addListener(marker, 'dragend', function (MouseEvent) {
          map.setCenter(MouseEvent.latLng)
          var lat = MouseEvent.latLng.lat()
          var lng = MouseEvent.latLng.lng()
          this.latlng.lat = lat
          this.latlng.lng = lng
        })
      },
      // 隐藏手机号码后几位
      hidePhone (phone) {
        if ( phone.length>0 ) {
          phone = phone.substring(0,4) + '****'
          this.uesrPhone = phone
          this.phoneIsHide = true
        }
      },
      showPhone () {
        this.uesrPhone = this.headInfo.phone
        this.phoneIsHide = false
        let id = this.id
        let data = {
          type: 1
        }
        let params = Qs.stringify(data)
        contactCount(id, params).then((res) => {
            if (res.data.data.errorID) {
              console.log(res.data.data.errorID)
            } else {
              console.log(res.data.data.errorID)
            }
        })
      },
      floorTranslate (floor) {
        let str = ''
        this.floorJson.forEach((item) => {
          if (item.value == floor) {
            str = item.text || ''
          }
        })
        return str
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      // 时间格式化
      dateFormat (value, justMonth) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var t
        if (justMonth) {
          t = m + '-' + Y
        } else {
          t = d + '-' + m + '-' + Y
        }
        return t
      },
      getTownshipItem (it) {
        let str = ''
        this.townshipJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionItem (it) {
        let str = ''
        this.regionJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertyTypeItem (it) {
        let str = ''
        this.propertyTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertySubTypeItem (it) {
        let str = ''
        this.propertySubTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getFurnishingItem (it) {
        let str = ''
        this.furnishingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getFacingIdItem (it) {
        let str = ''
        this.facingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getIndoorArrItem (it) {
        let str = ''
        this.indoorJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getOutdoorArrItem (it) {
        let str = ''
        this.outdoorJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getSpecialFeaturesArrItem (it) {
        let str = ''
        this.specialFeaturesTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getDetail (id) {
        visitorInformation(id).then((res) => {
          if (res.data.data.errorID === 0){
            let data = res.data.data.object
            // 详情页用户头部信息
            let headInfoData = data.userContact
            this.headInfo.photo = headInfoData.photo
            this.headInfo.name = headInfoData.name
            this.headInfo.phone = headInfoData.phone
            this.hidePhone(headInfoData.phone)
            this.headInfo.email = headInfoData.email
            this.banners = data.photoList
            // 如果没有图片的话展示默认图片
            if (this.banners.length == 0) {
              this.banners = [{photoUrl: '../static/default.png'}]
            }
            this.propertyName = data.propertyName
            this.street = data.street
            // 地址处理
            this.townshipId = data.townshipId
            this.regionId = data.regionId

            this.mmkPrice = data.mmkPrice
            this.usdPrice = data.usdPrice
            this.masterBedrooms = data.masterBedrooms
            this.bedrooms = data.bedrooms
            this.bathrooms = data.bathrooms
            this.floorSize = data.floorSize
            this.floorWidth = data.floorWidth
            this.floorLength = data.floorLength
            this.landSize = data.landSize
            this.landWidth = data.landWidth
            this.landLength = data.landLength
            this.priceSqft = data.psf
            this.transactionType = data.transactionTypeId // 1 rent   2sale
            this.furnishingId = data.furnishingId
            // 房产种类
            this.propertyTypeId = data.propertyTypeId
            this.propertySubTypeId = data.propertySubTypeId

            this.buildYear = data.buildYear
            this.floorNo = data.floorNo
            this.totalFloor = data.totalFloor
            // 朝向
            this.facingId = data.facingId

            this.Listed = data.updateDatetime
            this.listingId = data.listingId
            // Indoor Features
            if (data.fittingList) {
              this.indoorArr = data.fittingList
            } else {
              this.indoorArr = []
            }

            // outdoor Features
            if (data.featureList) {
              this.outdoorArr = data.featureList
            } else {
              this.outdoorArr = []
            }

            // specialFeatures
            if (data.landscapeList) {
              this.specialFeaturesTypeArr = data.landscapeList
            } else {
              this.specialFeaturesTypeArr = []
            }

            // description
            let text = ''
            if (data.description != null) {
              text = data.description.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(new RegExp("\n", "gm"),'<br/>')
            }
            this.description = text
            // 地图渲染
            let latlng = {
              lat: '',
              lng: ''
            }
            latlng.lat = data.latitude
            latlng.lng = data.longitude
            if (data.latitude) {
              this.showMap = true
              setTimeout(() => {
                this.initMap(latlng)
              }, 1500)
            } else {
              this.showMap = false
            }
          }else {
            console.log('err')
          }

        })

      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
    },
    mounted () {
      // window.scrollTo(0, 0)
      /* Google Map Init */
      GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
      GoogleMapsLoader.VERSION = '3.14'
      GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
      GoogleMapsLoader.load(function (google) {
        let geocoder = new google.maps.Geocoder()
        let googleObj = google
        let mapsObj = {autocomplete: '', geocoder: geocoder, googleObj: googleObj}
        window.mapsObj = mapsObj
      })

      // 页面跳转进来获取参数
      this.id = this.$route.query.id
      // this.id = 2154
      // 调用接口获取详情页面的数据
      this.getDetail(this.id)
    }
  }
</script>

<style>
  .buy-details-box{
    /*margin-bottom: 50px;*/
  }
  .buy-details-box .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .buy-details-box .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .buy-details-box .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .buy-details-box .img-box {
    width: 550px;
  }

  .buy-details-box .img-box img {
    width: 100%;
    height: 100%;
  }

  .buy-details-box .breadcrumb {
    margin-bottom: 20px;
  }

  .buy-details-box .bottom-box {
    padding-top: 5px;
  }

  .buy-details-box .bottom-box img {
    width: 100%;
    height: 100%;
  }

  .buy-details-box .img-wrap {
    height: 480px;
    overflow: hidden;
  }

  .buy-details-box .wrap-left {
    width: 550px;
    float: left;
  }

  .buy-details-box .wrap-right {
    margin-left: 550px;
    max-width:400px;
  }

  .buy-details-box .wrap-right-top {
    margin: 0 15px;
    height: 270px;
    border-bottom: 1px solid #d4d3d3;
  }

  .buy-details-box .item {
    /*height: 34px;*/
    /*line-height: 34px;*/
    font-size: 16px;
  }

  .buy-details-box .item-left {
    min-width: 160px;
    margin-right: 20px;
    display: inline-block;
    color: #83888f;
    height: 34px;
    line-height: 34px;
  }

  .buy-details-box .item-right {
    color: #0b0b0b;
    height: 34px;
    line-height: 34px;
  }

  .buy-details-box .wrap-right-bottom {
    overflow: hidden;
  }

  .buy-details-box .wrap-right-bottom-img {
    width: 130px;
    height: 130px;
    overflow: hidden;
    margin: 30px 30px 30px 20px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
  }

  .buy-details-box .wrap-right-bottom-img img {
    width: 100%;
    height: 100%;
  }

  .buy-details-box .message {
    /*margin-left: 80px;*/
    /*margin-top: 70px;*/
    margin-left:40px;
    padding: 30px 30px 25px 30px;
    background: rgb(242, 242, 242);
  }

  .buy-details-box .line {
    /*padding: 10px;*/
    border-bottom: 1px solid #d4d3d3;
  }

  .buy-details-box .price-box {
    /*padding: 20px 0;*/
    padding-bottom: 30px;
  }

  .buy-details-box .green-icon {
    color: #0fcb75;
    margin-right: 3px;
  }

  .buy-details-box  #Map {
    width: 500px;
    height: 400px;
    line-height: 400px;
    color: #aeaeae;
    background: #fff;
  }

  .buy-details-box .units {
    overflow: hidden;
    /*height: 280px;*/
    margin-top: 20px;
  }
  .buy-details-box .img-left {
    /*width: 360px;*/
    /*height: 270px;*/
    width: 280px;
    height: 200px;
    float: left;
  }

  .buy-details-box .img-left img {
    width: 100%;
    height: 100%;
  }

  .buy-details-box .title {
    /*padding: 10px 0;*/
    padding-bottom: 10px;
    font-size: 16px;
    color: #ef9f02;
    font-weight: bold;
  }

  .buy-details-box .img-content {
    padding-top: 10px;
    margin-left: 370px;
    height: 200px;
    font-size: 16px;
    line-height: 1.5;
  }

  .buy-details-box .price-currency {
    color: red;
  }
  .buy-details-box .price-currency i {
    font-size: 20px;
  }
  .buy-details-box .uintTitle {
    /*margin: 0 10px;*/
    color: #343333;
  }

  .buy-details-box .icon-item {
    margin: 0 5px;
  }

  .buy-details-box .map-box {
    width: 50%;
    height: 400px;
  }

  .buy-details-box .back {
    padding: 40px;
    text-align: center;
    position: absolute;
    top: 32px;
    right: 100px;
  }

  .buy-details-box .edit {
    position: fixed;
    top: 130px;
    right: 50px;
  }

  .buy-details-box .content {
    font-size: 16px;
  }

  .buy-details-box .price-option-title {
    color: #ffa600;
    margin-right: 10px;
  }

  .buy-details-box .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .buy-details-box .container-buy {
    width: 70%;
    margin: 0 auto;
    padding: 40px 0;
  }
  .buy-details-box .box-border {
    border-bottom: 1px solid #e0e0e0 !important
  }
  .buy-details-box .mes-logo {
    display: inline-block;
    vertical-align: middle;
  }
  .buy-details-box .phone-logo{
    position: absolute;
    top: 50%;
    margin-top: -12.5px;
  }
  .buy-details-box .mes-value {
    margin-left: 15px;
  }
  .buy-details-box .phone-value {
    margin-left: 35px;
    max-width: 300px;
    display: inline-block;
    word-break: break-all;
    height: 100%;
  }

  .buy-details-box .mes {
    /*height: 30px;*/
    line-height: 30px;
    /* white-space:nowrap; */
    overflow:hidden;
    text-overflow:ellipsis;
    text-align: center;
    position: relative;
  }
  .buy-details-box .mes:last-child{
    margin: 0;
  }
  .buy-details-box .mes-head{
    margin-bottom: 30px;
  }
  .buy-details-box .company-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
  }
  .buy-details-box .others-btn {
    margin-left:40px;
  }
  .buy-details-box .others-btn .mes img{
    width: 25px;
    height:25px;
    display: inline-block;
  }
  .buy-details-box .room-txt{
    margin:0 55px 0 8px;
  }
  .buy-details-box .no-padding{
    padding:0;
  }
  .buy-details-box .no-padding .price-box .content{
    /*padding: 30px 0;*/
    padding-top: 30px;
  }
  .content-bottom {
    padding-bottom:30px;
  }
</style>
